import React, { Component } from "react";
import { connect } from "react-redux";
import "./ModifyBankPhone.scss";
import MainLayout from "../../../../component/mainLayout/mainLayout";
import MessageBox from "../../../../component/messageBox/messageBox";
import { Toast, List, InputItem } from "antd-mobile";
import yhTools from "../../../../tools/yh";
import { InterfaceG } from "../../../../config/Config";

const Item = List.Item;

class ModifyBankPhone extends Component {
	constructor(props) {
		super(props);
		let pageParams = JSON.parse(this.props.match.params.data);
		console.log(JSON.stringify(pageParams));
		this.state = {
			loadStatus: "1", // （ '0'：数据加载中，'1'：加载完成，'2'：加载失败）
			bankName: pageParams.bankName, //银行名称
			channelCode: pageParams.channelCode, //渠道编号
			cardNo: pageParams.cardNo, //银行卡后四位
			phone: "", //预留手机号
			telNo: pageParams.telNo
		};
		console.log(this.state);
	}

	//初始化数据
	componentDidMount() {
		//初始化数据
		// let objs = {
		//     url: InterfaceG.changePhoneInit,
		//     params: {
		//         channelCode: this.state.channelCode
		//     }
		// }
		// console.log("初始化请求数据" + JSON.stringify(objs));
		// yhTools.request(objs).then((resp) => {
		//     console.log("初始化返回数据:" + JSON.stringify(resp));
		//     if (resp.code == "0") {
		//         this.setState({
		//             bankName: resp.data.bankName,//银行名称
		//             cardNo: resp.data.cardNo,//银行卡后四位
		//         });
		//     } else {
		//         Toast.info(resp.message, 2);
		//     }
		// });
	}

	getPhone(value) {
		console.log(value.replace(/\s/g, ""));
		this.setState({
			phone: value.replace(/\s/g, "")
		});
	}

	/**
	 * 提交按钮点击事件
	 * @param {用户输入的验证码} code
	 * @param {发送验证码接口回调参数} resp
	 */
	msgSubmitButtClickAction(code, resp) {
		console.log("验证码：" + code);
		if (code == "" || code.toString().length < 6) {
			Toast.info("请输入六位验证码", 2);
			return;
		}
		let _that = this;
		_that.setState(
			{
				msgSubmitButtStatus: "0"
			},
			() => {
				let objs = {
					url: InterfaceG.changePhone,
					params: {
						channelCode: _that.state.channelCode, //渠道编号
						mobilePhone: _that.state.phone, //手机号
						messageSerialNumber: resp.messageSerialNumber, //银行的短信流水号
						verifyCode: code
					},
					_alertShow: false
				};
				console.log(JSON.stringify(objs));
				yhTools.request(objs).then(resp => {
					console.log("修改手机号：" + JSON.stringify(resp));
					if (resp.code == "0") {
						//返回电子银行首页
						this.props.history.goBack();
					} else {
						Toast.info(resp.message, 2);
						this.refs.msgCode.handleClose(); //关闭验证码框
					}
				});
			}
		);
	}

	sendCode() {
		if (this.state.phone.length < 11) {
			Toast.info("请输入11位手机号码", 2);
			return;
		}
		console.log(this.state);
		//发送验证码
		let obj = {
			url: InterfaceG.changePhoneVcode,
			params: {
				channelCode: this.state.channelCode, //渠道编号
				mobilePhone: this.state.phone //手机号
			}
		}; // 在此填写报文结构
		console.log(JSON.stringify(obj));
		this.refs.msgCode.sendVerificationCode(obj);
	}

	render() {
		const headerParams = {
			header: {
				title: "修改银行预留手机号",
				goToApp: false // 返回APP
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles,
			loadStatus: this.state.loadStatus // （ '0'：数据加载中，'1'：加载完成，'2'：加载失败）
		};
		const msgParams = {
			time: 60, //倒计时
			msgTitle: "输入短信验证码", // 标题
			msgSubmitButtText: "确认修改", // 底部按钮文案
			msgSubmitButtStatus: this.state.msgSubmitButtStatus, // 底部按钮状态 '3':常态 '0':加载中 '0':加载中 '1':正在加载 '2':'失败'
			msgSubmitButtClick: (code, resp) =>
				this.msgSubmitButtClickAction(code, resp) // 点击提交按钮
		};
		return (
			<MainLayout pageParams={headerParams}>
				<div className="modify_phone_page">
					<div className="area-tip">您正在修改绑定银行卡的预留手机号</div>
					<List>
						<Item>
							<label>银行卡号</label>
							<InputItem
								className="input-no-line"
								value={this.state.bankName + "(" + this.state.cardNo + ")"}
								editable={false}
							/>
						</Item>
						<Item>
							<label>银行卡预留手机号</label>
							<InputItem
								className="input-no-line"
								placeholder="请输入您的预留手机号"
								type="phone"
								onChange={this.getPhone.bind(this)}
							/>
						</Item>
					</List>
					<div className="area-tip">请确认您已在银行修改新的手机号</div>
					<div
						className={
							this.state.phone.length >= 11
								? "btn-common btn-agree"
								: "btn-common"
						}
						onClick={this.sendCode.bind(this)}
					>
						下一步
					</div>
				</div>
				<MessageBox options={msgParams} ref="msgCode" />
			</MainLayout>
		);
	}
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps() {
	return {};
}

const ModifyBankPhonePage = connect(
	mapStateToProps,
	mapDispatchToProps
)(ModifyBankPhone);
export default ModifyBankPhonePage;
